<template>
  <div>
    <divider>演示事件流</divider>
    <div id="eventStream" class="cm-margin-10">
      <ul class="captrue">
        <li>
          <button>捕获</button>
        </li>
      </ul>
      <ul class="popup">
        <li>
          <button>冒泡</button>
        </li>
      </ul>
      <ul class="both">
        <li>
          <button>捕获+冒泡</button>
        </li>
      </ul>
    </div>
    
    <divider>演示自定义事件</divider>
    <div id="freeEvent">
      <ul>
        <li>
          <button @click="triggerEvent">触发</button>
        </li>
      </ul>
    </div>
    
    <divider>文档部分</divider>
    <div id="md"></div>
  </div>
</template>

<script>

import md from '@/markdowns/jsBase-event.md'

import { Divider } from 'ant-design-vue'

export default {
  name: 'jsBase-event',
  components: {
    Divider
  },
  data () {
    return {
      
    }
  },
  watch: {
    
  },
  computed: {
    
  },
  methods: {
    eventStreamAddEvent (className = '', isCapture = false) {
      const parent = this.dom.eventStream.querySelector('.' + className)
      if (!parent) { return }
      
      const prefix = isCapture ? '捕获' : '冒泡'
      
      parent.addEventListener('click', (e) => {
        console.log(prefix + 'parent')
        // e.stopPropagation()
      }, isCapture)
      
      const child1 = parent.querySelector('li')
      if (!child1) { return }
      child1.addEventListener('click', (e) => {
        console.log(prefix + 'child1')
        // e.stopPropagation()
      }, isCapture)
      
      const child2 = child1.querySelector('button')
      if (!child2) { return }
      child2.addEventListener('click', (e) => {
        console.log(prefix + 'child2')
        // 组织冒泡，取消注释可以看到效果
        // e.stopPropagation()
      }, isCapture)
    },
    
    initFreeEvent () {
      this.freeEvent = document.createEvent('CustomEvent')
      this.freeEvent.initEvent('a', true, true)
      
      /*
      这段代码和上面的起到一样的效果
      this.freeEvent = new CustomEvent('a', {
        detail: {},
        bubbles: true,
        cancelable: true
      })
      */
      
      window.addEventListener('a', (e) => {
        console.log('自定义事件window', e)
      })
      
      document.addEventListener('a', (e) => {
        console.log('自定义事件document', e)
      })
      
      const parent = this.dom.freeEvent.querySelector('ul')
      if (!parent) { return }
      
      parent.addEventListener('a', (e) => {
        console.log('自定义事件parent', e)
      })
      
      const child1 = parent.querySelector('li')
      if (!child1) { return }
      child1.addEventListener('a', (e) => {
        console.log('自定义事件child1', e)
      })
      
      const child2 = child1.querySelector('button')
      if (!child2) { return }
      child2.addEventListener('a', (e) => {
        console.log('自定义事件child2', e)
      })
    },
    
    // 点击触发自定义事件
    triggerEvent (e) {
      e.target.dispatchEvent(this.freeEvent)
    }
  },
  created () {
    
  },
  mounted () {
    this.$el.querySelector('#md').innerHTML = this.$md(md)
    this.dom = {}
    this.dom.eventStream = this.$el.querySelector('#eventStream')
    this.dom.freeEvent = this.$el.querySelector('#freeEvent')
    
    // 初始化事件流演示
    this.eventStreamAddEvent('captrue', true)
    
    this.eventStreamAddEvent('popup', false)
    
    this.eventStreamAddEvent('both', true)
    this.eventStreamAddEvent('both', false)
    
    // 自定义事件演示
    this.initFreeEvent()
  },
}
  
</script>

<style>
</style>
